<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#container{
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: #dcdcdc;
				z-index: -1;
			}
			.box{
				position: absolute;
				width: 100px;
				height: 100px;
				border: 2px dashed transparent;
				box-sizing: border-box;
			}
			.act{
				border-color: #707070;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="box"></div>
		</div>
		<script type="text/javascript">
			var isDrag = false
			var start = []
			var end = []
			var boxEl = container.children[0]
			window.onmousedown = ()=>{
				isDrag = true
				boxEl.classList.add("act")
				start[0] = end[0] = event.pageX
				start[1] = end[1] = event.pageY
				boxEl.style.left = start[0] + "px"
				boxEl.style.top = start[1] + "px"
			}
			window.onmousemove = ()=>{
				if(isDrag){
					end[0] = event.pageX
					end[1] = event.pageY
					boxEl.style.width = end[0] - start[0] + "px"
					boxEl.style.height = end[1] - start[1] + "px"
					if(start[0] > end[0]){
						boxEl.style.left = end[0] + "px"
						boxEl.style.width = start[0] - end[0] + "px"
					}
					if(start[1] > end[1]){
						boxEl.style.top = end[1] + "px"
						boxEl.style.height = start[1] - end[1] + "px"
					}
				}
			}
			window.onmouseup = ()=>{
				isDrag = false
				boxEl.classList.remove("act")
			}
		</script>
	</body>
</html>
